﻿<!DOCTYPE html>
<html>
<head>
    <title>home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link href="/css/bootstrap.css" rel="stylesheet" />
    <link href="/css/font-awesome.css" rel="stylesheet" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <style type="text/css">
        .bodybase {
            background-color: #f9f9f9;
            font-size: 15px;
        }

        .container-fluid {
            padding-left: 0;
            padding-right: 0;
        }

        /*****************************************************************************************/

        nav {
            background-color: #e5e6e6;
            background-color: rgba(229, 230, 230, 0.73);
            overflow: hidden;
            z-index: 1000;
        }

            nav ul {
                float: right;
            }

        .navbar-nav .nav-item {
            float: right;
            margin-right: 1rem;
        }

            .navbar-nav .nav-item:hover {
                text-decoration: underline;
                color: black;
            }

        .shadow {
            -moz-box-shadow: 3px 3px 4px #000;
            -webkit-box-shadow: 3px 3px 4px #000;
            box-shadow: 3px 3px 4px #b9b1b1;
        }
        /*****************************************************************************************/

        #menu {
            margin-top: .5rem;
        }

            #menu .list-group-item {
                position: relative;
                border-style: none;
                text-align: center;
                background-color: #f9f9f9;
                -webkit-transition-property: all;
                -webkit-transition-duration: 0.1s;
                -webkit-transition-timing-function: ease;
                }
                /*#menu .list-group .list-group-item .submenu {
                display: none;
            }*/


                #menu .list-group-item:hover {
                    background-color: #cacaca;
                    cursor: pointer;
                    border-left-width: 5px;
                    border-left-color: black;
                    border-left-style: solid;
                }

            /*#menu .list-group .list-group-item:hover .submenu {
                display: block;
            }*/

            #menu button {
                display: block;
                margin: 3px auto;
            }

            #menu div:first-child {
                border-bottom-style: solid;
                border-bottom-width: 1px;
                border-bottom-color: grey;
            }
        /*****************************************************************************************/
        #content .breadcrumb {
            margin-top: 10px;
            background-color: #f9f9f9;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: gray;
        }

        #content ol.breadcrumb {
            border-radius: 0;
            margin-bottom: 5px;
        }
        #content .card {
            overflow: hidden;
        }
        #content .card span {
            font-size: .8rem;
        }
        #content .card .clearboth {
            clear: both;
        }
        blockquote p {
            font-size: 1rem;
        }

        .card img {
            /*图片黑白*/
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
            /*图片大小以为位置*/
            width: 70px;
            height: 70px;
        }

        .card {
            border-width: 0;
            border-style: none;
            border-radius: 0;
        }

        #content ul li {
            display: table-cell;
            width: 1%;
            background-color: #f9f9f9;
        }

        #content .card .list-group-item {
            border-width: 0;
            border-style: none;
            height: 10px;
            padding: 0;
            text-align: center;
            border-bottom-width: 2px;
            border-bottom-color: #f9f9f9;
            border-bottom-style: solid;
        }


            #content .card .list-group-item:hover {
                background-color: #cacaca;
                cursor: pointer;
                border-bottom-color: black;
            }

        #content .card {
            margin: 3rem 0;
        }

        /*****************************************************************************************/
        #recommanduser .list-group-item {
            border-width: 0;
            border-style: none;
            border-bottom-width: 2px;
            border-bottom-color: #f9f9f9;
            border-bottom-style: solid;
        }

            #recommanduser .list-group-item:hover {
                background-color: #cacaca;
                cursor: pointer;
            }

        #recommanduser .recomandtoptitle ul li {
            display: table-cell;
            width: 1%;
        }
        #recommanduser .recomandtoptitle .list-group-item:hover {
            border-bottom-width: 2px;
            border-bottom-color: black;
            border-bottom-style: solid;
        }
        #recommanduser .recomandtoptitle ul {
            border-bottom-color: black;
            border-bottom-style: solid;
            border-bottom-width: 1px;
        }
    </style>
</head>
<body class="bodybase">
    <nav class="navbar navbar-light shadow">
        <a class="navbar-brand" href="#">ShareYou,分享你的卓越</a>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Devlopment</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">POST</a>
            </li>
        </ul>
    </nav>
<div class="container-fluid">
    <div class="row">
        <!--左边栏-->
        <div class="col-md-2" id="menu">
            <div>
                <button type="button" class="btn btn-info">Click ME</button>
            </div>
            <div>
                <ul class="list-group">
                    <li class="list-group-item"><i class="icon-camera-retro"></i> Windows</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Morbi leo risus</li>
                </ul>
            </div>
        </div>
        <!--内容区域-->
        <div id="content" class="col-md-8">
            <div>
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Library</a></li>
                    <li class="active">Data</li>
                </ol>
            </div>
            <div>
                <blockquote class="blockquote">
                    <p>努力不一定成功，但是不努力一定会轻松喔！</p>
                </blockquote>
            </div>
            <div>
                <div class="card" >
                    <img class="img-rounded pull-left" src="/1.png" />
                    <h6>这个是文本相关的标题</h6>
                    <span style="font-size: .8rem;">这个是标题中中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这</span>
                    <div class="clearboth"></div>
                    <div>
                        <!--列表项-->
                        <ul class="list-group">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Morbi leo risus</li>
                        </ul>
                    </div>
                </div>
                <div class="card" >
                    <img class="img-rounded pull-left" src="/1.png" />
                    <h6>这个是文本相关的标题</h6>
                    <span >这个是标题中中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这</span>
                    <div ></div>
                    <div>
                        <!--列表项-->
                        <ul class="list-group">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Morbi leo risus</li>
                        </ul>
                    </div>
                </div>
                <div class="card" >
                    <img class="img-rounded pull-left" src="/1.png" />
                    <h6>这个是文本相关的标题</h6>
                    <span >这个是标题中中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这</span>
                    <div ></div>
                    <div>
                        <!--列表项-->
                        <ul class="list-group">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Morbi leo risus</li>
                        </ul>
                    </div>
                </div>
                <div class="card" >
                    <img class="img-rounded pull-left" src="/1.png" />
                    <h6>这个是文本相关的标题</h6>
                    <span >这个是标题中中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这内容内容这个是标题中的内容内容这</span>
                    <div ></div>
                    <div>
                        <!--列表项-->
                        <ul class="list-group">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Morbi leo risus</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--右边栏-->
        <div class="col-md-2" id="recommanduser">
            <div>
                <div class="recomandtoptitle">
                    <ul class="list-group">
                        <li class="list-group-item bodybase">推荐文章</li>
                    </ul>
                </div>
                <div>
                    <ul class="list-group">
                        <li class="list-group-item bodybase">Cras justo odio</li>
                        <li class="list-group-item bodybase">Dapibus ac facilisis in</li>
                        <li class="list-group-item bodybase">Morbi leo risus</li>
                        <li class="list-group-item bodybase">Porta ac consectetur ac</li>
                        <li class="list-group-item bodybase">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>


            <div class="recomandtoptitle">
                <!--<p style="margin-top: 20px; margin-bottom: 0;border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: black;">推荐用户</p>-->
                <ul class="list-group">
                    <li class="list-group-item bodybase">推荐用户</li>
                    <!--<li class="list-group-item bodybase">推荐用户</li>-->
                </ul>
            </div>
            <div>
                <ul class="list-group">
                    <li class="list-group-item bodybase">Cras justo odio</li>
                    <li class="list-group-item bodybase">Dapibus ac facilisis in</li>
                    <li class="list-group-item bodybase">Morbi leo risus</li>
                    <li class="list-group-item bodybase">Porta ac consectetur ac</li>
                    <li class="list-group-item bodybase">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
    </div>
</div>
    <!--设计state结构-->
    <script type="text/javascript">
        var state = {
            //模块导航
            navs: [
            {
                name: 'POST', //模块名称
                url: '/post/index', //模块的url
                id: 2 //模块的id
            }],
            //分类信息
            categories: [
            {
                name: '.net',//分类名称
                id: 2, //模块的id
                select:true //是否被选中
            }],

            //面包削导航
            historyUrl: [

                {
                    name: 'home'//url其中名称
                    //todo:待定
                }
            ],
            Posts: [
                {
                    title: '标题',//文章标题
                    content: 'fdafd',//文章内容
                    img: '/fda',//图片url
                    like:32     //喜欢文章
                }
            ],
            recomand: {
                users: [
                    {
                        userId: 1,//用户id
                        userName: 'kangze', //用户名称
                        select:true//选中推荐用户
                    }
                ],
                posts: [
                    {
                        postId: 1,//文章的id
                        title: '文章名称',//文章的名称
                        select: true//选中推荐用户
                    }
                ]
            }
        }
    </script>
</body>
</html>